<template>
	<view class="content">
		<u-navbar placeholder :autoBack="false" title="我的订单" leftIconColor="#fff">
		</u-navbar>
		<u-tabs :list="list4" lineWidth="30" lineColor="#FC2530" @change='scollSwiper' :current="current" :activeStyle="{
		            color: '#303133',
		            fontWeight: 'bold',
		            transform: 'scale(1.05)'
		        }" :inactiveStyle="{
		            color: '#606266',
		            transform: 'scale(1)'
		        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
		</u-tabs>
		<view class="body">
			<view class="item" v-for="(item,index) in data" :key="index">
				<view class="item_body">
					<view class="item_top">
						<u-icon name="coupon-fill" color="#FC2530" :label="item.name"></u-icon>
						<text>{{item.status==0?'未付款':item.status==1?'已付款':item.status==2?'已退款':'已完成'}}</text>
					</view>
					<u-divider></u-divider>
					<view class="itebodym_">
						<view class="body_left">
							<u-image :src="item.bookingQrCode|photoPrefix" radius="10px" width="175rpx" height="125rpx"
								:fade="true" duration="450"></u-image>
						</view>
						<view class="body_right">

							<u-text size="24rpx" type="info" :text="'订单编号：'+item.id" :lines="1"></u-text>
							<u-text size="24rpx" type="info" :lines="1" :text="'预定时间：'+item.timePeriod">
							</u-text>
							<view>
								<u-tag style="display: inline-block" v-for="i in item.patternInfoList"
									:text="i.partnerName" plain size="mini"></u-tag>
							</view>
							<u-text size="24rpx" type="info" :lines="1" text="总价：0"></u-text>
							<u-button v-if="item.status==0" type="primary" size="mini" text="付款" @click="fukuan(item)">
							</u-button>
							<u-button v-if="item.status==1" type="primary" size="mini" text="退款" @click="tuikuan(item)">
							</u-button>

						</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty mode="list" :show="!data[0]">
		</u-empty>
		<u-notify ref="notify"></u-notify>
		<tabbar currentTab='order' />
	</view>
</template>

<script>
	import tabbar from "@/components/tabbar/index"
	export default {
		components: {
			tabbar,
		},
		data() {
			return {
				current: 0,
				data: [],
				data0: [],
				data1: [],
				data2: [],
				data3: [],
				data4: [],
				list4: [{
					name: '全部'
				}, {
					name: '未付款'
				}, {
					name: '待使用',
				}, {
					name: '已退款',
				}, {
					name: '已完成',
				}],
				mobile: '',
			}
		},
		mounted() {
			uni.getStorage({
				key: 'userInfo',
				success: (res) => {
					this.mobile = res.data.mobile
				}
			})
			this.getOrder(this.mobile)

		},
		methods: {
			getOrder(mobile) {
				this.$api({
					url: '/customer/getBookedRecord/' + mobile,
					method: 'get'
				}).then((res) => {
					this.data4 = res.data
					for (let s of res.data) {
						switch (s.status) {
							case 0:
								this.data0.push(s)
								break;
							case 1:
								this.data1.push(s)
								break;
							case 2:
								this.data2.push(s)
								break;
							case 3:
								this.data3.push(s)
								break;
						}
					};

					this.setData(this.current)
				})
			},
			fukuan(item) {
				this.$api({
					url: '/customer/payOrder/' + item.id,
					method: 'get'
				}).then((res) => {
					if (res.code == 200) {
						this.$refs.notify.success(res.message)
						this.$router.go(0)
					} else {
						this.$refs.notify.warning(res.message)
					}
				})
			},
			tuikuan(item) {
				this.$api({
					url: '/customer/refundOrder/' + item.id,
					method: 'get'
				}).then((res) => {
					if (res.code == 200) {
						this.$refs.notify.success(res.message)
						this.getOrder(this.mobile)
						this.$router.go(0)
					} else {
						this.$refs.notify.warning(res.message)
					}
				})
			},
			setData(index) {

				if (index == 0) {
					this.data = this.data4
				} else if (index == 1) {
					this.data = this.data0
				} else if (index == 2) {
					this.data = this.data1
				} else if (index == 3) {
					this.data = this.data2
				} else if (index == 4) {
					this.data = this.data3
				}
			},
			scollSwiper(e) {
				this.current = e.index
				this.setData(this.current)
			},
		}
	}
</script>

<style lang="scss">
	.content {
		.body {
			.item {
				padding: 20rpx;

				.item_body {
					padding: 30rpx;
					border-radius: 20rpx;
					--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
					box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

					.item_top {
						display: flex;
						justify-content: space-between;
					}

					.itebodym_ {
						display: flex;

						.body_right {
							// width: 100%;
							padding: 0 25rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-around;
						}
					}
				}





			}
		}
	}
</style>
